<template>
  <div id="displayArea_head">
    <div id="navsheel">
      <button class="tags" v-for="item in breadNav" :key="item" :class="{'tagsActive':item===hoveritem}">
        <span @click="autojump(item);hoveritem=item">{{ item }}</span>
        <span @click="autoclose(item)">x</span>
      </button>
    </div>
    <div id="username" @mouseover="openMenus" @mouseleave="closeCheck(0)">{{ username }}<i
        class="el-icon-caret-bottom"/></div>
    <div class="menu">
      <div class="item-top"></div>
      <ul ref="menu" @mouseover="closeCheck(1)" @mouseleave="closeCheck(2)">
        <li class="item" @click="selectItem(0)">{{ menus[0].name }}</li>
        <li class="item" @click="selectItem(1)">{{ menus[1].name }}</li>
      </ul>
    </div>
    <div id="logout" @click="logout" title="登出">
      <img style="width:20px; height:17px;" src="../assets/images/logout.png" alt="返回"/>
    </div>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
import {mapState} from 'vuex'

export default {
  name: "NavigationBar",
  data() {
    return {
      breadNav: ["主页"],
      hoveritem: "主页",
      isShow: false,
      menus: [{
        name: "我的博客",
        link: "https://www.cnblogs.com/herculepoirt/"
      }, {
        name: "Gitee",
        link: "https://gitee.com/hercule_poirt"
      }],
      iSize: 50,
      mouse_in: false
    }
  },
  computed: {
    ...mapState(['taglist', 'activeName', 'username']),
    autohover() {
      return this.activeName;
    },
  },
  methods: {
    ...mapMutations(['close', 'addMainPage', 'changetaglength', 'setActiveByName', 'setUserName']),
    autojump(name) {
      //利用findIndex,查询数组对象中符合筛选函数的目标下标
      let index = this.taglist.findIndex(function checkname(value) {
        return name === value.name
      });
      /*      this.hoveritem=this.breadNav[0];*/
      this.$router.push({path: this.taglist[index].routeName});
      this.$store.commit('setActiveByNum', index);//使用ByNum因为这个函数较ByName没有foreach遍历，执行更快
    },
    autoclose(name) {
      let index = this.taglist.findIndex(function checkname(value) {
        return name === value.name
      });
      this.close(index);
      this.autotags();
    },
    autotags() {
      let changed = false;
      this.taglist.forEach((value, index, array) => {
        if (value.collapse === false && this.breadNav.indexOf(value.name) === -1) {
          this.breadNav.push(value.name);
        } else if (value.collapse === true && this.breadNav.indexOf(value.name) !== -1) {
          this.breadNav.splice(this.breadNav.indexOf(value.name), 1);//splice时裁剪数组，slice是数组内返回指定范围
          changed = true;
        }
      });
      if (changed === true && this.breadNav.length >= 1 && this.breadNav.indexOf(this.activeName) === -1) {
        this.autojump(this.breadNav[0]);
      }
      if (this.breadNav.length === 0) {
        this.addMainPage();
        this.breadNav[0] = "主页";
        this.hoveritem = "主页"
      }
      this.changetaglength(this.breadNav.length);
    },
    logout() {
      this.$router.push({name: 'login'});
      this.setUserName("");
    },
    openMenus() {
      this.$refs.menu.style.transform = "translate(0, 0)"
    },
    closemenus() {
      if (this.mouse_in === false) {
        this.$refs.menu.style.transform = "translate(0, -55px)"
      }
    },
    closeCheck(status) {
      switch (status) {
        case 0:
          setTimeout(this.closemenus, 100)
          break;
        case 1:
          this.mouse_in = true
          break;
        case 2:
          this.mouse_in = false
          this.closemenus()
          break;
      }
    },
    selectItem(index) { //子选项点击事件
      window.open(this.menus[index].link, '_blank') //window.location.href=url是当前窗口开启，window.open是开启新窗口
    }
  },
  watch: { //监听路由变化时触发事件
    '$route': 'autotags',
    autohover(newvalue, oldvalue) {
      this.hoveritem = newvalue;
    }
  },
};
</script>

<style>
#displayArea_head {
  width: 100%;
  height: 32px;
  display: flex;
}

#navsheel {
  width: 82%;
  height: 100%;
  display: flex;
  background: #438aff;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}

.tags {
  min-width: 80px;
  width: auto;
  height: 25px;
  line-height: 21px;
  font-size: 12px;
  margin-left: 5px;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid #438aff;
  border-radius: 5px;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}

.tags:hover {
  color: white;
  background: #2e60b1;
  border: 1px solid #438aff;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}

.tagsActive {
  color: #2e60b1;
  background: #ffc400;
  -webkit-transition: all 0.1s ease-in;
  -moz-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}

.tags span:nth-child(1) {
  width: 85%;
  height: 100%;
}

.tags span:nth-child(2) {
  width: 30%;
  height: 100%;
}

#navbar {
  height: 100%;
  width: 100%;
  line-height: 56px;
  margin-left: 1%;

}

.el-breadcrumb__separator { /*分隔符*/
  color: white !important;
}

.el-breadcrumb__inner.is-link { /*有链接面包屑导航栏*/
  cursor: pointer !important;
}

.el-breadcrumb__inner { /*无链接面包屑导航栏*/
  font-weight: 700 !important;
  color: white !important;
}

#username {
  width: 15%;
  height: 100%;
  z-index: 1;
  background-color: #438aff;
  text-align: right;
  font-size: 20px;
  color: white;
}

#username:hover {
  cursor: pointer;
}

#logout {
  cursor: pointer;
  width: 5%;
  padding: 0px;
  height: 100%;
  background-color: #438aff;
  text-align: center;
  font-size: 20px;
  color: white;
}

.menu {
  width: 85px;
  height: 100px;
  margin: 0 0 0 -85px;
}

.item-top {
  width: 100%;
  height: 32px;
  background: transparent;
  list-style-type: none;
}

.menu ul {
  padding: 0;
  margin: 0;
  transform: translate(0, -55px);
  transition: all 150ms ease-out;
}

.item {
  color: white;
  font-size: 15px;
  padding: 0.2rem 0 0.2rem 0.48rem;
  text-align: left;
  position: relative;
  list-style-type: none;
  cursor: pointer;
  background-color: rgb(67 138 255);
}

.item:hover {
  background: #2e60b1;
}
</style>